<template>
	<view
		class="avatar-container"
		:style="{
			background: `linear-gradient(135deg, ${gradientColor1}, ${gradientColor2})`,
			// 修复：用 size 计算圆角（50% 更稳妥，避免尺寸单位问题）
			borderRadius: '50%',
			width: `${size}px`,
			height: `${size}px`
		}"
	>
		<text
			class="avatar-text"
			:style="{
				fontSize: `${autoTextSize}px`,
				color: textColor,
				zIndex: 1 // 确保文本层级在最上层
			}"
		>
			{{ getShortName(name) }}
		</text>
	</view>
</template>

<script>
export default {
	props: {
		name: {
			type: String,
			required: true,
			// 修复：给 name 加默认值，避免空值
			default: '未知'
		},
		size: {
			type: Number,
			default: 40,
			// 修复：校验 size 为正数，避免无效尺寸
			validator: (val) => val > 0
		},
		textColor: {
			type: String,
			default: '#ffffff'
		},
		textSize: {
			type: Number,
			default: 0
		}
	},
	computed: {
		gradientColor1() {
			// 确保 baseColors 有值（之前已修复）
			const baseColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'];
			const hash = this.name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
			return baseColors[hash % baseColors.length];
		},
		gradientColor2() {
			const color1 = this.gradientColor1 || '#45B7D1';
			const hex = color1.replace('#', '');
			const r = Math.max(0, Math.floor(parseInt(hex.substr(0, 2), 16) * 0.8));
			const g = Math.max(0, Math.floor(parseInt(hex.substr(2, 2), 16) * 0.8));
			const b = Math.max(0, Math.floor(parseInt(hex.substr(4, 2), 16) * 0.8));
			return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
		},
		autoTextSize() {
			// 修复：确保字号最小为 12px，避免过小不可见
			const calcSize = this.textSize > 0 ? this.textSize : Math.floor(this.size * 0.4);
			return Math.max(8, calcSize); // 最小12px，确保可读
		}
	},
	methods: {
		getShortName(fullName) {
			// 修复：彻底处理所有异常值，确保返回有效字符串
			if (!fullName) return '未知';
			const safeName = String(fullName)
				.trim()
				// 过滤特殊字符：仅保留中文、字母、数字
				.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '');
			// 处理过滤后为空的情况，避免返回空字符串
			if (!safeName) return '未知';
			return safeName.length <= 2 ? safeName : safeName.substr(0, 2);
		}
	}
};
</script>

<style lang="scss" scoped>
/* 容器样式：Vue 和 Nvue 通用基础样式 */
.avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 确保文本/内容不溢出圆形 */
  border-radius: 50%; /* 核心：圆形（Nvue 优先用 50%，比动态计算更稳定） */

  /* 1. Web 端特有优化（Nvue 不支持，用条件编译隔离） */
  /* #ifndef APP-PLUS-NVUE */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.6), 
    inset 0 -2px 5px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.15);
  transform: translateZ(0); /* 避免 Web 端锯齿 */
  /* #endif */
}

/* 文本样式：Vue 和 Nvue 通用基础样式 */
.avatar-text {
  font-weight: 500;
  text-align: center; /* 文本水平居中（Nvue 支持） */
  color: #ffffff; /* 文本颜色（确保可见） */

  /* 2. Web 端特有文本优化（Nvue 不支持） */
  /* #ifndef APP-PLUS-NVUE */
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  white-space: nowrap; /* Web 端禁止文本换行 */
  /* #endif */

  /* 3. Nvue 端特有文本样式（关键修正：文本不换行） */
  /* #ifdef APP-PLUS-NVUE */
  white-space: nowrap; /* Nvue 中必须显式设置，否则文本可能换行 */
  /* #endif */
}
</style>
